<template>
    <a-flex wrap="wrap" gap="small">
        <a-button type="primary" @click="exportTable()">导出</a-button>
        <a-button type="primary" @click="showModal()">导入</a-button>
    </a-flex>

    <a-modal :footer="null" v-model:open="open" title="上传导入" @ok="handleOk">
        <a-upload :before-upload="beforeUpload" :show-upload-list="false" :custom-request="customRequest">
            <a-button type="primary">选择文件</a-button>
        </a-upload>
    </a-modal>
</template>

<script setup lang="ts">
import Api from '@/api/';
import { ref } from 'vue';

const exportTable = async () => {
    Api.eventListServe.downloadTable()
};

const open = ref(false)

const showModal = () => {
    open.value = true;
};
const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};

const beforeUpload = (file: File) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const data = e.target?.result;
            if (data) {
                resolve(data);
            } else {
                reject(new Error('文件读取出错'));
            }
        };
        reader.readAsText(file);
    });
};

const emit = defineEmits(['flushTable'])
const customRequest = (options: any) => {
    const { file, onSuccess, onError } = options;
    const formData = new FormData();
    formData.append('file', file);
    const newLocal = Api.eventListServe.importData(formData);
    console.log(newLocal);
    emit('flushTable')
}


</script>

<style lang="scss" scoped></style>